<template>
    <section class="page-hello">
        <van-popup
            v-model="show"
            position="top"
            :style="{ height: '30%',backgroundColor: 'rgb(44,62,80)' }"
        >
            <ul class="list-ul">
                <template v-for="item in routerList">
                    <li v-if="item.name" :key="item.name" class="list-li">
                        <router-link
                            :to="item.path"
                            class="url-link"
                        >
                            {{ (item.meta && item.meta.title) || item.name }}
                        </router-link>
                    </li>
                </template>
            </ul>
        </van-popup>

        <div class="top"> <div class="ant" @click="show = !show"> </div><div> <van-icon name="friends" size="36px" /> </div></div>
        <Acticle />
    </section>
</template>

<script type="text/babel">
    import Acticle from '../article/article';
    import { Button, Popup, Icon } from 'vant';
    // 组件
    export default {
        name: 'PageHello',
        components: {

            Acticle,
            [Button.name]: Button,
            [Popup.name]: Popup,
            [Icon.name]: Icon,
        },
        data() {
            return {

                msg: '欢迎访问!',
                routerList: [],
                interval_timer: null,
                show: false,
            };
        },
        created() {
            this.routerList = this.$router.options.routes.filter(
                item => item.path !== this.$route.path
            );
        },
        methods: {
            showOpen() {
                this.open = !this.open;
            },
        },
    };
</script>

<style lang="less" rel="stylesheet/less" >
@import './style.less';

</style>
